<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:insert="~{include :: header(${issueInfo != null ? (issueInfo.trackerName != null ? issueInfo.trackerName + ' #' + (issueInfo.id != null ? issueInfo.id : '') : '') : ''})}" />
	<th:block th:insert="~{include :: summernote-css}" />
	<th:block th:insert="~{include :: datetimepicker-css}" />
	<th:block th:insert="~{include :: bootstrap-fileinput-css}" />
	<th:block th:insert="~{include :: select2-css}" />
	<!-- 移除不必要的预加载标签，改为按需加载 -->
	<!-- 如果确实需要预加载，确保在页面中立即使用该字体 -->
	<link rel="stylesheet" href="/css/pm/issue-detail.css">
    <link rel="stylesheet" href="/css/pm/issue-relations.css">
    <link rel="stylesheet" href="/css/pm/issueOperation.css">
    <link rel="stylesheet" href="/css/jquery-ui.css">
    <link rel="stylesheet" href="/css/common.css">
</head>
<body>
    <div class="main-content">
        <div class="row">
            <div class="col-sm-9">
				<form id="form-issue-add" class="form-horizontal">
					<!-- 隐藏字段存储当前需求ID -->
					<input type="hidden" id="current-issue-id" th:value="${issueInfo.id}" />
					<div class="form-header row">
						<div class="col-sm-8">
							<h3 class="h4"><span style="font-size: 24px;"><a href="JavaScript:void(0);" 
								th:data-project-name="${issueInfo.project != null ? issueInfo.project.name : '未知项目'}"
								th:data-project-id="${issueInfo.project != null ? issueInfo.project.id : ''}"
								class="project-link"
								onclick="openProjectTab(this)">[[${issueInfo.project != null ? issueInfo.project.name : '未知项目'}]]（[[${issueInfo.project != null ? issueInfo.project.customerName : '未知客户'}]]）</a></span> » [[${issueInfo.trackerName}]] #[[${issueInfo.id}]]&emsp;[[${issueInfo.subject}]]</h3>
						</div>
						<div class="col-sm-4 text-right">
							<div class="btn-group">
								<a href="JavaScript:void(0);" th:onclick="'openEditModal(' + ${issueInfo.id} + ')'" class="btn btn-default btn-sm" shiro:hasPermission="project:issue:edit">编辑</a>
								<a href="#" class="btn btn-default btn-sm">复制</a>
								<a href="JavaScript:void(0);" onclick="closeItem()" class="btn btn-default btn-sm btn-danger">返回</a>
							</div>
						</div>
					</div>
					<div class="ibox-title">
						<h2 style="font-weight: 600">[[${issueInfo.subject}]] <small>由 <a>[[${issueInfo.authorName}]]</a> 在 <span data-toggle="tooltip" data-placement="top" th:title="${@tool.formatLocalDateTime(issueInfo.createTime)}"><a>[[${timeSinceCreation}]]</a></span> 之前添加.<span th:if="${timeSinceUpdate != null AND issueInfo.updateTime != issueInfo.createTime}"> 更新于 <span data-toggle="tooltip" data-placement="top" th:title="${@tool.formatLocalDateTime(issueInfo.updateTime)}"><a>[[${timeSinceUpdate}]]</a></span> 之前.</span></small></h2>
					</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="col-sm-5">
								<div class="form-group">
									<label class="col-sm-3 control-label"><strong>跟踪：</strong></label>
									<div class="col-sm-5 info-value-cell"><span>[[${issueInfo.trackerName}]]</span></div>
								</div>
							</div>
							<div class="col-sm-7">
								<div class="form-group">
									<label class="col-sm-3 control-label"><strong>开始日期：</strong></label>
									<div class="col-sm-5 info-value-cell">[[${issueInfo.startDate}]]</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="col-sm-5">
								<div class="form-group">
									<label class="col-sm-3 control-label"><strong>状态：</strong></label>
									<div class="col-sm-5 info-value-cell"><span class="label status-label" th:classappend="'label-' + ${issueInfo.issueStatus != null ? issueInfo.issueStatus.htmlColor : '52C41A'}">[[${issueInfo.statusName}]]</span></div>
								</div>
							</div>
							<div class="col-sm-7">
								<div class="form-group">
									<label class="col-sm-3 control-label"><strong>计划完成日期：</strong></label>
									<div class="col-sm-5 info-value-cell">
										<span th:if="${issueInfo.dueDate != null}" 
											th:classappend="${@tool.isOverdueAndUnresolved(issueInfo.dueDate, issueInfo.statusId)} ? 'text-danger' : ''"
											th:style="${@tool.isOverdueAndUnresolved(issueInfo.dueDate, issueInfo.statusId)} ? 'color: #ff4d4f; font-weight: bold;' : ''">
											[[${issueInfo.dueDate}]]
											<span th:if="${@tool.isOverdueAndUnresolved(issueInfo.dueDate, issueInfo.statusId)}">
												(<span th:text="${@tool.getOverdueDays(issueInfo.dueDate)}"></span>天延期)
											</span>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="col-sm-5">
								<div class="form-group">
									<label class="col-sm-3 control-label"><strong>优先级：</strong></label>
									<div class="col-sm-5 info-value-cell"><span class="label priority-label" th:classappend="'label-' + ${issueInfo.priority.listClass}">[[${issueInfo.priorityName}]]</span></div>
								</div>
							</div>
							<div class="col-sm-7">
								<div class="form-group">
									<label class="col-sm-3 control-label"><strong>% 进度：</strong></label>
									<div class="col-sm-5 info-value-cell">
										<div class="progress progress-custom-width">
											<div th:style="'width: ' + ${issueInfo.doneRatio} + '%'" th:attr="aria-valuemax='100', aria-valuemin='0', aria-valuenow=${issueInfo.doneRatio}" role="progressbar" class="progress-bar">
												<span th:class="${issueInfo.doneRatio <= 10} ? 'text-black' : ''">[[${issueInfo.doneRatio}]]%</span>
											</div>
										</div>
									</div>

								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="col-sm-5">
								<div class="form-group">
									<label class="col-sm-3 control-label"><strong>指派给：</strong></label>
									<div class="col-sm-5 info-value-cell">[[${issueInfo.assignedToName}]]</div>
								</div>
							</div>
							<div class="col-sm-7">
								<div class="form-group">
									<label class="col-sm-3 control-label"><strong>预期时间：</strong></label>
									<div class="col-sm-5 info-value-cell"><span th:if="${issueInfo.estimatedHours != null and issueInfo.estimatedHours != ''}">[[${issueInfo.estimatedHours}]] 小时</span></div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="col-sm-5">
								<div class="form-group">
									<label class="col-sm-3 control-label"><strong>类别：</strong></label>
									<div class="col-sm-5 info-value-cell">[[${issueInfo.categoryName}]]</div>
								</div>
							</div>
							<div class="col-sm-7" th:if="${entrieList != null and entrieList.size() > 0}">
								<div class="form-group">
									<label class="col-sm-3 control-label"><strong>耗时：</strong></label>
									<div class="col-sm-5 info-value-cell"><span th:if="${entrieHours != null and entrieHours != ''}">[[${entrieHours}]] 小时</span></div>
								</div>
							</div>
						</div>
					</div>
					<div class="hr-line-dashed"></div>
					<div th:if="${issueInfo.description != null and issueInfo.description != ''}">
						<div class="ibox-title">
							<h4>描述</h4>
						</div>
						<div class="row">
							<div class="col-sm-10 description-content" th:utext="${issueInfo.description}"></div>
						</div>
						<div class="hr-line-dashed"></div>
					</div>
					<div th:if="${attachmentList != null and attachmentList.size() > 0}">
						<div class="ibox-title">
							<h4>文件</h4>
						</div>
						<div class="row">
						<div class="col-sm-10 table-content">
							<table class="table table-bordered table-striped">
									<tbody>
										<tr th:each="attachment : ${attachmentList}">
											<td th:text="${attachment.filename}"></td>
											<td th:text="${attachment.fileSizeValue}"></td>
											<td th:text="${@tool.formatLocalDateTime(attachment.createTime)}"></td>
											<td>
												<a th:href="@{/common/download(fileName=${attachment.filePath})}" class="btn btn-xs btn-primary">下载</a>
												<a th:if="${buttonShow != 1}" th:onclick="'deleteAttachment(' + ${attachment.id} + ')'" class="btn btn-xs btn-danger">删除</a>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<div class="row">
							<div class="divthumbnails" th:if="${attachmentList != null and attachmentList.size() > 0}">
								<div class="divthumbnail" th:each="attachment : ${attachmentList}" th:title="${attachment.filename}" th:if="${@tool.isImageFile(attachment.filename)}">
									<a href="javascript:void(0);" class="image-preview" 
									th:attr="data-id=${attachment.id}, data-filename=${attachment.filename}, data-filepath=${attachment.filePath}">
										<img srcset="/attachments/thumbnail/398/200 2x" class="attachment-image" width="100%" th:alt="${attachment.filename}" loading="lazy" th:src="'/profile' + ${attachment.filePath}">
									</a>
								</div>
							</div>
						</div>
						<div class="hr-line-dashed"></div>
					</div>
					<div>
						<div class="ibox-title" style="display: flex; justify-content: space-between; align-items: center;">
							<h4 style="margin: 0;">相关的需求</h4>
							<div class="contextual" style="margin: 0;">
								<a onclick="$('#new-relation-div').toggle(); $('#relation_issue_to_id:visible').focus(); return false;" href="#">新增</a>
							</div>
						</div>
						<div class="relation-issues-wrapper">
							<table class="list issues odd-even">
								<tbody id="relation-issues-tbody">
								</tbody>
							</table>
						</div>
						<div class="row" id="new-relation-div" style="display: none;">
							<form class="new_relation" id="new-relation-form" style="display: none;" accept-charset="UTF-8" data-remote="true" method="post">
								<div class="col-sm-12" style="margin-left: 30px; padding-top: 15px;">
									<div class="form-group form-inline">
										<select class="form-control" onchange="setPredecessorFieldsVisibility();" name="relation_type" id="relation_relation_type" style="width: 120px;">
											<option selected="selected" value="relates">关联到</option>
											<option value="duplicates">重复</option>
											<option value="duplicated">与其重复</option>
											<option value="blocks">阻挡</option>
											<option value="blocked">被阻挡</option>
											<option value="precedes">优先于</option>
											<option value="follows">跟随于</option>
											<option value="copied_to">复制到</option>
											<option value="copied_from">复制于</option>
										</select>
										<label style="margin-left: 10px; margin-right: 5px;">需求 #</label>
										<div class="input-group"><span class="input-group-addon"><i class="fa fa-search"></i></span>
											<input type="text" class="form-control" name="issue_to_id" id="relation_issue_to_id" style="width: 120px;" autocomplete="off" size="10" placeholder="输入需求ID">
										</div>
										<span id="predecessor_fields" style="display:none; margin-left: 10px;">
											<label>延期:</label> 
											<input size="3" type="text" name="relation[delay]" id="relation_delay" class="form-control" style="width: 60px; margin-left: 5px;"> 
											<label style="margin-left: 5px;">天</label>
										</span>
										<input type="button" name="commit" value="新增" class="btn btn-sm btn-primary" style="margin-left: 10px;" onclick="addRelation()" data-disable-with="新增">
										<a href="#" onclick="$('#new-relation-div').hide(); return false;" class="btn btn-sm btn-default" style="margin-left: 5px;">取消</a>
									</div>
								</div>
							</form>
						</div>
						<div class="hr-line-dashed"></div>
					</div>

					<div class="col-sm-12" th:if="${journalList != null and journalList.size() > 0}">
						<div class="panel blank-panel">
							<div class="panel-heading">
								<div class="panel-options">

									<ul class="nav nav-tabs">
										<li class="active"><a data-toggle="tab" href="#tab-history">历史记录</a>
										</li>
										<li><a data-toggle="tab" href="#tab-notes">说明</a>
										</li>
										<li><a data-toggle="tab" href="#tab-properties">更改属性</a>
										</li>
										<li><a data-toggle="tab" href="#tab-time_entries">耗时</a>
										</li>
									</ul>
								</div>
							</div>

							<div class="panel-body">
								<div class="tab-content">
									<div id="tab-history" class="tab-pane active">
										<!-- 显示journalList内容 -->
										<div th:if="${journalList != null and journalList.size() > 0}">
											<div th:each="journal, index : ${journalList}" class="journal-entry" th:id="${'change-' + journal.id}">
												<div th:id="${'note-' + index.count}" class="note">
													<h4 class="note-header journal-header-with-link">
														<div class="journal-header-content">
															由 <a>[[${journal.updatedByName}]]</a> 更新于 <span data-toggle="tooltip" data-placement="top" th:title="${@tool.formatLocalDateTime(journal.createdOn)}"><a>[[${journal.timeSinceCreation}]]</a></span> 之前
														</div>
														<div class="journal-contextual">
															<a th:href="${'#note-' + index.count}" class="journal-link">#[[${index.count}]]</a>
														</div>
													</h4>
													<!-- 显示journal详情 -->
													<div th:if="${journal.detailList != null and journal.detailList.size() > 0}">
														<ul class="details">
															<li class="journal-detail-item" th:each="detail : ${journal.detailList}" th:utext="${detail.showDetail}"></li>
														</ul>
													</div>
													<div class="divthumbnails" th:if="${journal.attachmentList != null and journal.attachmentList.size() > 0}">
														<div class="divthumbnail" th:each="attachment : ${journal.attachmentList}" th:title="${attachment.filename}" th:if="${@tool.isImageFile(attachment.filename)}">
															<a href="javascript:void(0);" class="image-preview" 
															th:attr="data-id=${attachment.id}, data-filename=${attachment.filename}, data-filepath=${attachment.filePath}">
																<img srcset="/attachments/thumbnail/398/200 2x" class="attachment-image" width="100%" th:alt="${attachment.filename}" loading="lazy" th:src="'/profile' + ${attachment.filePath}">
															</a>
														</div>
													</div>
													<!--
														<div class="fa-hover col-md-3 col-sm-4">
															<i class="fa fa-search-plus" aria-hidden="true" style="font-size: 20px !important;"></i>
															<i class="fa fa-download" aria-hidden="true" style="font-size: 20px !important;"></i>
														</div>
													-->
													<div class="wiki journal-notes" th:id="'journal-' + ${journal.id} + '-notes'" th:utext="${journal.notes}" th:if="${journal.notes != null and journal.notes != ''}"></div>
												</div>
											</div>
										</div>
									</div>

									<div id="tab-notes" class="tab-pane">
										<div th:if="${journalNoteList != null and journalNoteList.size() > 0}">
											<div th:each="journal, index : ${journalNoteList}" class="journal-entry" th:if="${journal.notes != null and journal.notes != ''}" th:id="${'change-' + journal.id}">
												<div class="note">
													<h4 class="note-header journal-header-with-link">
														<div class="journal-header-content">
															由 <a>[[${journal.updatedByName}]]</a> 更新于 <span data-toggle="tooltip" data-placement="top" th:title="${@tool.formatLocalDateTime(journal.createdOn)}"><a>[[${journal.timeSinceCreation}]]</a></span> 之前
														</div>
														<div class="journal-contextual">
															<a class="journal-link">#[[${index.count}]]</a>
														</div>
													</h4>
													<div class="wiki journal-notes" th:id="'journal-' + ${journal.id} + '-notes'" th:utext="${journal.notes}" th:if="${journal.notes != null and journal.notes != ''}"></div>
												</div>
											</div>
										</div>
									</div>
									<div id="tab-properties" class="tab-pane">
										<!-- 显示journalList内容 -->
										<div th:if="${journalPropertielist != null and journalPropertielist.size() > 0}">
											<div th:each="journal, index : ${journalPropertielist}" class="journal-entry" th:if="${journal.detailList != null and journal.detailList.size() > 0}" th:id="${'change-' + journal.id}">
												<div class="note">
													<h4 class="note-header journal-header-with-link">
														<div class="journal-header-content">
															由 <a>[[${journal.updatedByName}]]</a> 更新于 <span data-toggle="tooltip" data-placement="top" th:title="${@tool.formatLocalDateTime(journal.createdOn)}"><a>[[${journal.timeSinceCreation}]]</a></span> 之前
														</div>
														<div class="journal-contextual">
															<a class="journal-link">#[[${index.count}]]</a>
														</div>
													</h4>
													
													<!-- 显示journal详情 -->
													<div th:if="${journal.detailList != null and journal.detailList.size() > 0}">
														<ul class="details">
															<li class="journal-detail-item" th:each="detail : ${journal.detailList}" th:utext="${detail.showDetail}"></li>
														</ul>
													</div>
													<div class="divthumbnails" th:if="${journal.attachmentList != null and journal.attachmentList.size() > 0}">
														<div class="divthumbnail" th:each="attachment : ${journal.attachmentList}" th:title="${attachment.filename}" th:if="${@tool.isImageFile(attachment.filename)}">
															<a href="javascript:void(0);" class="image-preview" 
															th:attr="data-id=${attachment.id}, data-filename=${attachment.filename}, data-filepath=${attachment.filePath}">
																<img srcset="/attachments/thumbnail/398/200 2x" class="attachment-image" width="100%" th:alt="${attachment.filename}" loading="lazy" th:src="'/profile' + ${attachment.filePath}">
															</a>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div id="tab-time_entries" class="tab-pane">
										<th:block th:each="entrie, index : ${entrieList}">	
											<div th:id="${'time-entry-' + entrie.id}" class="time_entry journal">
												<div class="note">
													<h4 class="note-header journal-header-with-link">
														<div class="journal-header-content">
															由 <a>[[${entrie.authorName}]]</a> 在 <a th:title="${@tool.formatLocalDateTime(entrie.createTime)}">[[${entrie.timeSinceCreation}]]</a> 之前添加
														</div>
														<div class="journal-contextual">
															<a class="journal-link">#[[${index.count}]]</a>
														</div>
													</h4>
													<ul class="details">
														<li>
															<strong>活动</strong>:<span th:text="${entrie.activityName}"></span>
														</li>
														<li>
															<strong>耗时</strong>:<span th:text="${entrie.formatHours}"></span>小时
														</li>
													</ul>
													<p></p>
												</div>
											</div>
										</th:block>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
				<div class="row" style="margin-bottom: 30px;">
					<div class="col-sm-offset-5 col-sm-10">
						<button type="button" class="btn btn-sm btn-primary" th:onclick="'openEditModal(' + ${issueInfo.id} + ')'" shiro:hasPermission="project:issue:edit"><i class="fa fa-check"></i>编辑</button>&nbsp;
						<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
					</div>
				</div>
	
				<!-- 评论区域 -->
				<div th:replace="pm/issue/comment_section :: commentSection"></div>
            </div>
            
            <!-- 右侧边栏 -->
            <div class="col-sm-3" id="sidebar">
                <!-- 侧边栏内容区域 -->
                <div id="sidebar-content" class="sidebar-content">
                    <!-- 操作模块 -->
                    <div class="ibox sidebar-module">
						<div class="ibox-title">
							<h5>操作</h5>
						</div>
						<div class="ibox-content">
                            <div class="btn-group-vertical btn-group-full-width">
                                <button type="button" class="btn btn-sm btn-warning sidebar-action-btn" th:onclick="'claimIssue(' + ${issueInfo.id} + ')'" th:if="${issueInfo.statusId == 1 and issueInfo.assignedToId != curUserId}">
                                    <i class="fa fa-hand-paper-o"></i> 领取
                                </button>
								<button type="button" class="btn btn-sm btn-info sidebar-action-btn" th:onclick="'submitIssue(' + ${issueInfo.id} + ')'" th:if="${(issueInfo.statusId == 2 or issueInfo.statusId == 5) and issueInfo.assignedToId == curUserId}">
									<i class="fa fa-send"></i> 提交
								</button>
								<button type="button" class="btn btn-sm btn-primary sidebar-action-btn" th:onclick="'reviewIssue(' + ${issueInfo.id} + ')'" th:if="${issueInfo.statusId == 3 and (issueInfo.authorId == curUserId or curUser.admin)}">
									<i class="fa fa-check-square"></i> 审核
								</button>
								<button type="button" class="btn btn-sm btn-success sidebar-action-btn" th:onclick="'logWorkingHours(' + ${issueInfo.id} + ')'" th:if="${(issueInfo.statusId == 2 or issueInfo.statusId == 5) and issueInfo.assignedToId == curUserId}">
									<i class="fa fa-clock-o"></i> 登记工时
								</button>
                                <button type="button" class="btn btn-sm btn-default sidebar-action-btn" id="watchButton" th:onclick="'toggleWatch(' + ${issueInfo.id} + ')'">
                                    <i class="fa fa-eye" id="watchIcon"></i> <span id="watchText">关注</span>
                                </button>
                                <button type="button" class="btn btn-sm btn-default sidebar-action-btn" th:onclick="'openSimilarIssuesModal(' + ${issueInfo.id} + ')'">
                                    <i class="fa fa-search"></i> 相似需求
                                </button>
                                <button type="button" class="btn btn-sm btn-default sidebar-action-btn" th:onclick="'openIssueStatsModal(' + ${issueInfo.id} + ')'">
                                    <i class="fa fa-bar-chart"></i> 数据参考
                                </button>
                                <button type="button" class="btn btn-sm btn-default sidebar-action-btn" style="display: none ;" th:onclick="'openRelationModal(' + ${issueInfo.id} + ')'">
                                    <i class="fa fa-link"></i> 关联需求
                                </button>
                                <button type="button" class="btn btn-sm btn-danger sidebar-action-btn" onclick="closeItem()">
                                    <i class="fa fa-times"></i> 关闭
                                </button>
                            </div>
                        </div>
                    </div>
					<!-- 关注者信息模块 -->
					<div class="ibox sidebar-module" id="watchers-section">
						<div class="ibox-title">
							<h5>领取信息</h5>
						</div>
						<div class="ibox-content">
							<ul class="list-unstyled sidebar-info-list">
								<li class="sidebar-info-item">
									<strong>发布人:</strong>
									<small class="sidebar-info-value" th:text="${issueInfo.authorName != '' ? issueInfo.authorName : issueInfo.createUser }"></small><br>
									<small class="sidebar-info-value" th:text="${@tool.formatLocalDateTime(issueInfo.createTime)}"></small>
								</li>
								<li class="sidebar-info-item">
									<strong>最近更新人:</strong>
									<small class="sidebar-info-value" th:text="${lastUpdatedByNonAuthor}"></small><br>
									<small class="sidebar-info-value" th:text="${lastUpdatedJournalDetail !=null ? @tool.formatLocalDateTime(lastUpdatedJournalDetail.createTime) : ''}"></small>
								</li>
								<li class="sidebar-info-item" style="margin: 0;padding: 0;">
									<strong>领取人:</strong>
									<small class="sidebar-info-value" th:text="${issueInfo.recipientName}"></small><br>
									<small class="sidebar-info-value" th:text="${@tool.formatLocalDateTime(issueInfo.collectionTime)}"></small>
								</li>
							</ul>
						</div>
					</div>
					
					<!-- 关注者信息模块 -->
					<div class="ibox sidebar-module" id="watchers-section">
						<div class="ibox-title">
							<h5>关注者 <small id="watcher-count">(<span id="watcher-count-num">0</span>人)</small></h5>
						</div>
						<div class="ibox-content">
							<div id="watchers-list" class="sidebar-watchers-list">
								<div class="text-center">
									<small class="text-muted">加载中...</small>
								</div>
							</div>
						</div>
					</div>
                    
                    <!-- 相关需求模块 -->
                    <div class="ibox sidebar-module" id="relations-section" style="display: none;">
                        <div class="ibox-title">
                            <h5>相关需求 <small id="relation-count">(<span id="relation-count-num">0</span>个)</small></h5>
                        </div>
                        <div class="ibox-content">
                            <div id="relations-list" class="sidebar-relations-list">
                                <div class="text-center">
                                    <small class="text-muted">加载中...</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 状态信息模块 -->
                    <div class="ibox sidebar-module">
						<div class="ibox-title">
							<h5>状态信息</h5>
						</div>
						<div class="ibox-content">
							<ul class="list-unstyled sidebar-info-list">
								<li class="sidebar-info-item">
									<strong>状态:</strong>
									<span class="label status-label" th:classappend="'label-' + ${issueInfo.issueStatus != null ? issueInfo.issueStatus.htmlColor : '52C41A'}">
										[[${issueInfo.statusName}]]
									</span>
								</li>
								<li class="sidebar-info-item">
									<strong>优先级:</strong>
									<span class="label priority-label" th:classappend="'label-' + ${issueInfo.priority.listClass}">
										[[${issueInfo.priorityName}]]
									</span>
								</li>
								<li class="sidebar-info-item">
									<strong>指派给:</strong>
									<span class="sidebar-info-value">[[${issueInfo.assignedToName}]]</span>
								</li>
								<li class="sidebar-info-item">
									<strong>完成度:</strong><br>
									<div class="progress progress-sm">
										<div th:style="'width: ' + ${issueInfo.doneRatio} + '%'" 
											th:classappend="${issueInfo.doneRatio < 50} ? 'progress-bar-warning' : (${issueInfo.doneRatio < 100} ? 'progress-bar-info' : 'progress-bar-success')" 
											class="progress-bar" role="progressbar">
											<span th:text="${issueInfo.doneRatio} + '%'"></span>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
					
					<!-- 时间信息模块 -->
					<div class="ibox sidebar-module">
						<div class="ibox-title">
							<h5>时间信息</h5>
						</div>
						<div class="ibox-content">
							<ul class="list-unstyled sidebar-info-list">
								<li class="sidebar-info-item">
									<strong>发布时间:</strong>
									<small class="sidebar-info-value" th:text="${@tool.formatLocalDateTime(issueInfo.createTime)}"></small>
								</li>
								<li class="sidebar-info-item">
									<strong>更新时间:</strong>
									<small class="sidebar-info-value" th:text="${@tool.formatLocalDateTime(issueInfo.updateTime)}"></small>
								</li>
								<li class="sidebar-info-item">
									<strong>完工时间:</strong>
									<small class="sidebar-info-value" th:text="${@tool.formatLocalDateTime(issueInfo.completionTime)}"></small>
								</li>
								<li class="sidebar-info-item">
									<strong>完工用时:</strong>
									<small class="sidebar-info-value" th:text="${timeDifference}"></small>
								</li>
							</ul>
						</div>
					</div>
					<!-- 附件信息模块 -->
					<div class="ibox sidebar-module">
						<div class="ibox-title">
							<h5>附件信息</h5>
						</div>
						<div class="ibox-content">
							<div th:if="${attachmentList != null and attachmentList.size() > 0}">
								<small class="sidebar-attachment-count">有 [[${attachmentList.size()}]] 个附件</small>
								<div class="sidebar-attachment-list">
									<div th:each="attachment : ${attachmentList}" class="sidebar-attachment-item">
										<a th:href="@{/common/download(fileName=${attachment.filePath})}" 
										class="btn btn-xs btn-default sidebar-attachment-btn attachment-btn">
												<i class="fa fa-paperclip"></i> 
												<span th:text="${attachment.filename}"></span>
											</a>
									</div>
								</div>
							</div>
							<div th:if="${attachmentList == null or attachmentList.size() == 0}">
								<small class="text-muted">暂无附件</small>
							</div>
						</div>
					</div>
					
					<!-- 操作记录模块 -->
					<div class="ibox sidebar-module">
						<div class="ibox-title">
							<h5>操作记录 <small id="operation-count">(<span id="operation-count-num">0</span>条)</small></h5>
						</div>
						<div class="ibox-content">
							<div id="operation-records-list" class="sidebar-operation-list">
								<div class="text-center">
									<small class="text-muted">加载中...</small>
								</div>
							</div>
							<div class="text-center" style="margin-top: 10px;">
								<button type="button" class="btn btn-xs btn-primary" onclick="viewAllOperations()">查看全部</button>
							</div>
						</div>
					</div>
            	</div>
			</div>
        </div>
    </div>
	<th:block th:insert="~{include :: footer}" />
	<th:block th:insert="~{include :: summernote-js}" />
	<th:block th:insert="~{include :: datetimepicker-js}" />
	<th:block th:insert="~{include :: bootstrap-fileinput-js}" />
	<th:block th:insert="~{include :: select2-js}" />
    <script th:src="@{/js/jquery-ui.js}"></script>
	<script th:src="@{/js/tool.js}"></script>
	<script th:src="@{/js/pm/issue.js}"></script>
	<script th:src="@{/js/pm/issue-relation.js}"></script>

	<script>
	    var prefix = ctx + "project/issue";

		$("[data-toggle='tooltip']").tooltip();
		function openEditModal(issueId) {
			var url = prefix + "/edit/" + issueId + "?buttonShow=1";
			$.modal.open("编辑需求", url, "1000");
		}
		function logWorkingHours(issueId){
			var url = prefix + "/logWorkingHours/" + issueId;
			$.modal.open("登记工时", url, "1000");
		}

		$(function() {
			// 初始化table配置以便使用detailTab方法
			var options = {
				detailUrl: prefix + "/{id}",
				modalName: "需求",
				width: 1000
			};
			$.table.init(options);

			// loadRelations($("#current-issue-id").val());
			loadRelationsForTable($("#current-issue-id").val());

			// 安全初始化自动完成功能
			if (typeof multipleAutocompleteField === 'function') {
				// 使用动态获取当前需求ID，避免硬编码
				var currentIssueId = $('#current-issue-id').val();
				multipleAutocompleteField('relation_issue_to_id', prefix +'/autoComplete');
			} else {
				console.error('multipleAutocompleteField function is not available');
			}
		})

		$(document).ready(function() {
			imagePreview.init();
		});
		
		// 删除附件函数
		function deleteAttachment(attachmentId) {
			$.modal.confirm("确定要删除这个附件吗？", function() {
				$.ajax({
					url: ctx + "project/attachments/delete/" + attachmentId,
					type: "DELETE",
					dataType: "json",
					success: function(result) {
						if (result.code == 0) {
							$.modal.alertSuccess("删除成功");
							// 刷新页面或重新加载附件列表
							setTimeout(function() {
								location.reload();
							}, 1000);
						} else {
							$.modal.alertError(result.msg);
						}
					},
					error: function() {
						$.modal.alertError("删除失败，请稍后再试");
					}
				});
			});
		}
		
		// 加载操作记录
		function loadOperationRecords(issueId) {
			console.log("loadOperationRecords: " + issueId);
			var operationPrefix = ctx + "project/issueOperation";
			$.ajax({
				url: operationPrefix + "/issue/list/" + issueId,
				type: "POST",
				dataType: "json",
				success: function(result) {
					if (result.code == 0) {
						displayOperationRecords(result.rows);
						// 更新操作记录数量
						$("#operation-count-num").text(result.total);
					} else {
						$('#operation-records-list').html('<div class="text-center"><small class="text-muted">加载失败</small></div>');
					}
				},
				error: function() {
					$('#operation-records-list').html('<div class="text-center"><small class="text-muted">加载失败</small></div>');
				}
			});
		}
		
		// 显示操作记录
		function displayOperationRecords(records) {
			var operationList = $('#operation-records-list');
			
			if (records && records.length > 0) {
				var html = '';
				// 只显示最近3条记录
				var limit = records.length > 3 ? 3 : records.length;
				for (var i = 0; i < limit; i++) {
					var record = records[i];
					var date = new Date(record.operationTime);
					var formattedTime = date.getFullYear() + "-" + 
									   ("0" + (date.getMonth() + 1)).slice(-2) + "-" + 
									   ("0" + date.getDate()).slice(-2) + " " + 
									   ("0" + date.getHours()).slice(-2) + ":" + 
									   ("0" + date.getMinutes()).slice(-2);
					
					html += '<div class="sidebar-operation-item">';
					html += '<div class="operation-desc">' + record.operationDesc + '</div>';
					html += '<div class="operation-info">';
					html += '<small class="text-muted">' + record.operatorName + ' · ' + formattedTime + '</small>';
					html += '</div>';
					html += '</div>';
				}
				operationList.html(html);
			} else {
				operationList.html('<div class="text-center"><small class="text-muted">暂无操作记录</small></div>');
			}
		}
		
		// 查看所有操作记录
		function viewAllOperations() {
			var issueId = $('#current-issue-id').val();
			var url = ctx + "project/issueOperation/issue/" + issueId;
			$.modal.openTab("需求操作记录", url);
		}
		
		// 页面加载时检查关注状态和加载关注者列表
		$(document).ready(function() {
			var issueId = $('#current-issue-id').val();
			if (issueId) {
				// 加载操作记录
				loadOperationRecords(issueId);
				
				// 初始化评论
				initComments(issueId);
				
				// 检查当前用户是否已关注此需求
				$.ajax({
					url: prefix + "/isWatched/" + issueId,
					type: "GET",
					dataType: "json",
					success: function(result) {
						if (result.code == 0) {
							updateWatchButton(result.data);
						}
					}
				});
				
				// 加载关注者列表
				loadWatchers(issueId);
			}
		});
		
    </script>
	
	<!-- 相似需求模态框 -->
	<div th:replace="pm/issue/similar_issues_modal :: similarIssuesModal"></div>
	
	<!-- 统计数据模态框 -->
	<div th:replace="pm/issue/stats_modal :: statsModal"></div>
	
	<!-- 引入相似需求JavaScript -->
	<script th:src="@{/js/pm/issue_similar.js}"></script>
	
	<!-- 引入统计数据JavaScript -->
	<script th:src="@{/js/pm/issue_stats.js}"></script>
	
	<!-- 引入评论JavaScript -->
	<script th:src="@{/js/pm/issue_comments.js}"></script>
	
	<!-- 引入ECharts图表库 -->
	<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script> -->
    <script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>
</body>
</html>